<template>
  <div>
    <!-- <Title></Title>
    <hr />
    <Cnt></Cnt> -->

    <!-- 
      声明式导航
      to  指定跳转的路径  去那里
      默认的选中样式 router-link-active 样式名  可以修改 active-class="active"
      tag="p" 指定router-link 渲染成html的标签  默认为a
      exact 严格匹配  写在精简模糊 声明规则中
    -->
    <!-- <router-link exact to="/" active-class="active">home</router-link> -->
    <!-- ---------- -->
    <!-- <router-link :to="news">news</router-link> -->
    <!-- <router-link :to="{ path: '/news' }">news</router-link> -->

    <ul>
      <li @click="goFn('/home')">去首页</li>
      <li @click="goFn('/news')">去新闻</li>
    </ul>

    <!-- 路由渲染容器 -->
    <router-view></router-view>
  </div>
</template>

<script>
// 引入
import Title from "./components/Title";
import Cnt from "./components/Cnt";

export default {
  // 让本组件，注册一下此子组件
  components: { Title, Cnt },
  data() {
    return {
      news: "/news",
    };
  },
  methods: {
    goFn(uri) {
      // 编程式导航
      // this.$router.push(uri);
      // 对象
      this.$router.push({ path: uri });
    },
  },
};
</script>


<style>
/* 全部样式，App组件所有组件根 */
/* 定义全局样式 */
.active {
  color: red;
}
.router-link-active {
  color: red;
}
</style>